<template>
  <el-container class="layout-container-demo" style="height: 95%">

    <el-container>
      <el-main>
        <el-scrollbar>
          <el-table
              :data="pileData"
              style="width: 100%"
              border
              @row-click="pileClick"
          >
            <el-table-column
                prop="id"
                label="ID"
                width="80"
                align="center"
                class-name="whitespace-nowrap"
            />
            <el-table-column
                prop="pileNumber"
                label="桩基号"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileNumber" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="mileage"
                label="里程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.mileage" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="offset"
                label="偏距"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.offset" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="coordinateX"
                label="坐标X"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.coordinateX" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="coordinateY"
                label="坐标Y"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.coordinateY" size="small" style="width: 350px"/>
              </template>
            </el-table-column>
            <el-table-column
                prop="pileBottomElevation"
                label="桩底高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileBottomElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileTopElevation"
                label="桩顶高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileTopElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileDiameter"
                label="桩径"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileDiameter" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="pileLength"
                label="桩长"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pileLength" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="steelCageLength"
                label="钢筋笼长度"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.steelCageLength" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="overPouringLength"
                label="超灌长度"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.overPouringLength" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="groundElevation"
                label="地面高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.groundElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="actualPileBottomElevation"
                label="实际桩底高程"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.actualPileBottomElevation" size="small"  />
              </template>
            </el-table-column>
            <el-table-column
                prop="excavationTime"
                label="开挖时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.excavationTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="holeOpeningTime"
                label="开孔时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.holeOpeningTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="holeCompletionTime"
                label="成孔时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.holeCompletionTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="reinforcementCageLoweringTime"
                label="下钢筋笼时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.reinforcementCageLoweringTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="conduitLoweringTime"
                label="下导管时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.conduitLoweringTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="pouringTime"
                label="浇筑时间"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.pouringTime" size="small" />
              </template>
            </el-table-column>
            <el-table-column
                prop="testBlockNumber"
                label="试块编号"
                align="center"
                class-name="whitespace-nowrap"
            >
              <template #default="scope">
                <el-input v-model="scope.row.testBlockNumber" size="small" />
              </template>
            </el-table-column>
            <!-- 编辑和删除按钮列 -->


            <el-table-column fixed="right" label="操作" min-width="200">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="editRow(scope.row)">编辑</el-button>
                <el-button link type="primary" size="small" @click="goToDetails(scope.row)">快照</el-button>
                <el-button link type="primary" size="small"  @click="CreatExportRow(scope.row)">资料</el-button>
                <el-button link type="primary" size="small"  @click="showInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>

          </el-table>
          <!-- 分页部分 -->
          <div class="flex justify-center mt-4">
            <el-button @click="prevPage" :disabled="currentPage === 1">上一页</el-button>
            <span class="mx-2">{{ currentPage }} / {{ totalPages }}</span>
            <el-button @click="nextPage" :disabled="currentPage === totalPages">下一页</el-button>
          </div>
          <!-- 子组件弹出框 -->
          <PileDataEdit ref="editRef" :data="editRowData" @save="handleSave" />
          <PilePicture ref="editRefImage" :data="editRowData" @save="handleSave" />
          <PileExcelPouringExport ref="createRef" :data="editRowData"  />
          <PileDataQueryForm @queryData="select2"></PileDataQueryForm>
        </el-scrollbar>

      </el-main>

    </el-container>
  </el-container>
</template>

<script  setup>
import {onMounted, ref} from 'vue'
import {ElButton, ElInput, ElMessage, ElTable, ElTableColumn} from "element-plus";
import axios from "axios";
import PileDataEdit from "@/views/pile/components/PileDataEdit.vue";
import {getPiles} from '@/apis/api_pile'
import PileDataQueryForm from "@/views/pile/components/PileDataQueryForm.vue";
import PileExcelPouringExport from "@/views/pile/components/pileExcelPouringExport.vue";
import PilePicture from "@/views/pile/components/PilePicture.vue";
import router from "@/router/index.js";




const pileData = ref([]);
const currentPage = ref(1);
const itemsPerPage = ref(12);
const totalPages = ref(1);
const queryParams = ref({
  id: '',
  pileNumber: '',
  mileage: '',
  offset: '',
  coordinateX: '',
  coordinateY: '',
  pileBottomElevation: '',
  pileTopElevation: '',
  pileDiameter: '',
  pileLength: '',
  steelCageLength: '',
  overPouringLength: '',
  groundElevation: '',
  actualPileBottomElevation: '',
  excavationTime: '',
  holeOpeningTime: '',
  holeCompletionTime: '',
  reinforcementCageLoweringTime: '',
  conduitLoweringTime: '',
  pouringTime: '',
  testBlockNumber: '',
});

const editRowData = ref({}); // 传递给子组件的待编辑数据
const getPileData =async () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: itemsPerPage.value,
    ...queryParams.value
  };
  const res = await getPiles(currentPage.value, itemsPerPage.value, params);
  console.log(res);
  pileData.value = res.data.records;
  totalPages.value = Math.ceil(res.data.total / itemsPerPage.value);

  /*axios
      .get(`http://192.168.1.245:8082/pileData/page`, { params })
      .then((res) => {
        pileData.value = res.data.records;
        totalPages.value = Math.ceil(res.data.total / itemsPerPage.value);
      })
      .catch((error) => {
        console.log("数据错误", error);
      });
  console.log("数据已经跟新")*/
};



const pileClick = (row, event, column) => {
  console.log('选中行数据，详情', row);

};

const showInfo = (row, event, column) => {
  console.log('选中行数据，详情', row);
  // 假设 row.pileNumber 是具体数值（如 51-1），正确拼接 URL
 // const targetUrl = `/pile/pileInfo/${row.pileNumber}`; // 示例：51-1
  //const targetUrl = `http://192.168.1.245:5173/pile/pileInfo/${row.pileNumber}`; // 示例：51-1

  // 页面跳转（使用 window.location.href）
 // window.location.href = targetUrl;
  router.push(`/pile/pileInfo/${row.pileNumber}`);


/*  // 路径 + 参数
  this.$router.push(`/pileInfo/${row.pileNumber}`);*/
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    getPileData();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    getPileData();
  }
};

const fetchData = () => {
  currentPage.value = 1;
  getPileData();
};
const select2 =async(params) => {
  queryParams.value = params.value;
  currentPage.value = 1;
  // 过滤对象中值为 null 的属性
  const filteredQueryParams = Object.fromEntries(
      Object.entries(queryParams.value).filter(([_, value]) => value!== null)
  );

  const res = await getPiles(currentPage.value, itemsPerPage.value, filteredQueryParams);
  console.log(res);
  pileData.value = res.data.records;
  totalPages.value = Math.ceil(res.data.total / itemsPerPage.value);


};

const handleSave = (updatedData) => {
  // 找到要更新的数据在列表中的索引
  const index = pileData.value.findIndex((item) => item.id === updatedData.id);
  if (index!== -1) {
    pileData.value[index] = updatedData;
  }
  getPileData();
}
onMounted(()=>getPileData())

//------------------------打开业务弹框------------------------------
//编辑常用数据
const editRef=ref(null);
const editRow = (row) => {
  console.log("选择行数据，为弹出编辑框准备",row);

  editRowData.value = row; // 将待编辑的数据传递给子组件
  editRef.value.openDialog(row)
};

//编辑图片
const editRefImage=ref(null);
const goToDetails = (row) => {
  console.log("选择行数据，为弹出图片编辑框准备",row);
 /* editRowData.value = {...row }; // 将待编辑的数据传递给子组件*/
  editRefImage.value.openDialogImage(row)

};
//生成资料
const createRef=ref(null);
const CreatExportRow = (row) => {
  console.log('选择行数据，为生成资料框准备', row);
  editRowData.value = {...row }; // 将待编辑的数据传递给子组件
  createRef.value.openDownDialog(row)
};



</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 2px;
}
.auto-width-column {
  flex: 1 0 auto !important; /* 允许列根据内容自动伸缩 */
  width: auto !important;
  white-space: nowrap;      /* 保持内容不换行 */
}
</style>